<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      th:replace="~{layout/base :: layout(~{::title}, ~{::section})}">
<head>
    <meta charset="UTF-8">
    <title>公开书单 - 电子书下载平台</title>
</head>
<body>
    <section>
        <div class="container py-5">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>公开书单</h2>
                <div sec:authorize="isAuthenticated()">
                    <a th:href="@{/user/booklists}" class="btn btn-outline-primary me-2">
                        <i class="fas fa-list me-2"></i>我的书单
                    </a>
                    <a th:href="@{/user/booklists/create}" class="btn btn-primary">
                        <i class="fas fa-plus-circle me-2"></i>创建书单
                    </a>
                </div>
                <div sec:authorize="!isAuthenticated()">
                    <a th:href="@{/login}" class="btn btn-primary">
                        <i class="fas fa-sign-in-alt me-2"></i>登录后创建书单
                    </a>
                </div>
            </div>
            
            <!-- 搜索和筛选 -->
            <div class="card mb-4">
                <div class="card-body">
                    <form th:action="@{/booklists}" method="get" class="row g-3">
                        <div class="col-md-6">
                            <div class="input-group">
                                <input type="text" class="form-control" name="q" placeholder="搜索书单..." 
                                       th:value="${param.q}">
                                <button class="btn btn-outline-primary" type="submit">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <select class="form-select" name="sort">
                                <option value="popularity" th:selected="${param.sort == 'popularity'}">按热度排序</option>
                                <option value="newest" th:selected="${param.sort == 'newest'}">最新创建</option>
                                <option value="mostBooks" th:selected="${param.sort == 'mostBooks'}">藏书最多</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-outline-primary w-100">应用筛选</button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 书单列表 -->
            <div class="row">
                <!-- 动态数据 -->
                <div class="col-md-6 mb-4" th:each="booklist : ${booklists}">
                    <div class="card h-100 booklist-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <h5 class="card-title">
                                    <a th:href="@{'/booklists/' + ${booklist.listId}}" 
                                       th:text="${booklist.listName}">书单名称</a>
                                </h5>
                                <span class="badge rounded-pill" 
                                      th:style="'background-color:' + ${booklist.colorTag != null ? booklist.colorTag : '#6c757d'}"
                                      th:text="${booklist.bookCount + ' 本书'}">25 本书</span>
                            </div>
                            
                            <div class="mb-3">
                                <span class="text-muted">
                                    创建者: <a th:href="@{'/user/profile/' + ${booklist.creatorId}}" 
                                           th:text="${booklist.creatorNickname}">用户昵称</a>
                                </span>
                                <span class="text-muted ms-3">
                                    <i class="far fa-calendar-alt me-1"></i>
                                    <span th:text="${#temporals.format(booklist.createdAt, 'yyyy-MM-dd')}">2023-01-15</span>
                                </span>
                            </div>
                            
                            <!-- 书单封面滚动展示 -->
                            <div class="booklist-covers mb-3">
                                <div class="cover-scroll">
                                    <div th:each="cover, stat : ${booklist.coverUrls}" 
                                         th:if="${stat.index < 5}" 
                                         class="cover-item">
                                        <img th:src="${cover != null ? cover : '/img/default-cover.jpg'}" 
                                             alt="书籍封面" class="booklist-cover-img">
                                    </div>
                                    <!-- 静态数据（当没有动态数据时显示） -->
                                    <div th:if="${booklist.coverUrls == null || booklist.coverUrls.isEmpty()}">
                                        <div class="cover-item">
                                            <img src="/img/book1.jpg" alt="书籍封面" class="booklist-cover-img">
                                        </div>
                                        <div class="cover-item">
                                            <img src="/img/book2.jpg" alt="书籍封面" class="booklist-cover-img">
                                        </div>
                                        <div class="cover-item">
                                            <img src="/img/book3.jpg" alt="书籍封面" class="booklist-cover-img">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <p class="card-text booklist-description" th:text="${booklist.description}">
                                这是书单的描述，介绍这个书单的主题和内容特点...
                            </p>
                            
                            <div class="d-flex justify-content-between align-items-center mt-3">
                                <div>
                                    <span class="me-3">
                                        <i class="far fa-heart me-1"></i>
                                        <span th:text="${booklist.favoriteCount}">32</span> 收藏
                                    </span>
                                    <span>
                                        <i class="far fa-comment me-1"></i>
                                        <span th:text="${booklist.commentCount}">15</span> 评论
                                    </span>
                                </div>
                                <div>
                                    <a th:href="@{'/booklists/' + ${booklist.listId}}" 
                                       class="btn btn-sm btn-outline-primary">
                                        查看详情
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 静态数据（当没有动态数据时显示） -->
                <div class="col-md-6 mb-4" th:if="${booklists == null || #lists.isEmpty(booklists)}">
                    <div class="card h-100 booklist-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <h5 class="card-title">
                                    <a href="/booklists/1">经典文学作品集</a>
                                </h5>
                                <span class="badge rounded-pill" style="background-color: #dc3545">45 本书</span>
                            </div>
                            
                            <div class="mb-3">
                                <span class="text-muted">
                                    创建者: <a href="/user/profile/1">文学爱好者</a>
                                </span>
                                <span class="text-muted ms-3">
                                    <i class="far fa-calendar-alt me-1"></i>
                                    <span>2023-01-15</span>
                                </span>
                            </div>
                            
                            <!-- 书单封面滚动展示 -->
                            <div class="booklist-covers mb-3">
                                <div class="cover-scroll">
                                    <div class="cover-item">
                                        <img src="/img/book1.jpg" alt="书籍封面" class="booklist-cover-img">
                                    </div>
                                    <div class="cover-item">
                                        <img src="/img/book2.jpg" alt="书籍封面" class="booklist-cover-img">
                                    </div>
                                    <div class="cover-item">
                                        <img src="/img/book3.jpg" alt="书籍封面" class="booklist-cover-img">
                                    </div>
                                    <div class="cover-item">
                                        <img src="/img/book4.jpg" alt="书籍封面" class="booklist-cover-img">
                                    </div>
                                </div>
                            </div>
                            
                            <p class="card-text booklist-description">
                                收集了世界文学史上的经典名著，包括四大名著、外国文学名著等，是文学爱好者的必备书单。
                            </p>
                            
                            <div class="d-flex justify-content-between align-items-center mt-3">
                                <div>
                                    <span class="me-3">
                                        <i class="far fa-heart me-1"></i>
                                        356 收藏
                                    </span>
                                    <span>
                                        <i class="far fa-comment me-1"></i>
                                        128 评论
                                    </span>
                                </div>
                                <div>
                                    <a href="/booklists/1" class="btn btn-sm btn-outline-primary">
                                        查看详情
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-4" th:if="${booklists == null || #lists.isEmpty(booklists)}">
                    <div class="card h-100 booklist-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <h5 class="card-title">
                                    <a href="/booklists/2">计算机科学入门书籍</a>
                                </h5>
                                <span class="badge rounded-pill" style="background-color: #0d6efd">35 本书</span>
                            </div>
                            
                            <div class="mb-3">
                                <span class="text-muted">
                                    创建者: <a href="/user/profile/2">编程爱好者</a>
                                </span>
                                <span class="text-muted ms-3">
                                    <i class="far fa-calendar-alt me-1"></i>
                                    <span>2023-01-20</span>
                                </span>
                            </div>
                            
                            <!-- 书单封面滚动展示 -->
                            <div class="booklist-covers mb-3">
                                <div class="cover-scroll">
                                    <div class="cover-item">
                                        <img src="/img/book5.jpg" alt="书籍封面" class="booklist-cover-img">
                                    </div>
                                    <div class="cover-item">
                                        <img src="/img/book6.jpg" alt="书籍封面" class="booklist-cover-img">
                                    </div>
                                    <div class="cover-item">
                                        <img src="/img/book7.jpg" alt="书籍封面" class="booklist-cover-img">
                                    </div>
                                </div>
                            </div>
                            
                            <p class="card-text booklist-description">
                                精选计算机科学入门书籍，包括编程语言、算法、数据结构等基础知识，非常适合计算机专业学生和自学者。
                            </p>
                            
                            <div class="d-flex justify-content-between align-items-center mt-3">
                                <div>
                                    <span class="me-3">
                                        <i class="far fa-heart me-1"></i>
                                        245 收藏
                                    </span>
                                    <span>
                                        <i class="far fa-comment me-1"></i>
                                        85 评论
                                    </span>
                                </div>
                                <div>
                                    <a href="/booklists/2" class="btn btn-sm btn-outline-primary">
                                        查看详情
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 分页控件 -->
            <nav aria-label="Page navigation" th:if="${totalPages > 1}">
                <ul class="pagination justify-content-center">
                    <li class="page-item" th:classappend="${currentPage == 1} ? 'disabled' : ''">
                        <a class="page-link" 
                           th:href="@{'/booklists?page=' + ${currentPage - 1} + (${param.q != null ? '&q=' + param.q : ''}) + (${param.sort != null ? '&sort=' + param.sort : ''})}" 
                           aria-label="上一页">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    
                    <li class="page-item" th:each="i : ${#numbers.sequence(1, totalPages)}" 
                        th:classappend="${i == currentPage} ? 'active' : ''">
                        <a class="page-link" 
                           th:href="@{'/booklists?page=' + ${i} + (${param.q != null ? '&q=' + param.q : ''}) + (${param.sort != null ? '&sort=' + param.sort : ''})}" 
                           th:text="${i}">1</a>
                    </li>
                    
                    <li class="page-item" th:classappend="${currentPage == totalPages} ? 'disabled' : ''">
                        <a class="page-link" 
                           th:href="@{'/booklists?page=' + ${currentPage + 1} + (${param.q != null ? '&q=' + param.q : ''}) + (${param.sort != null ? '&sort=' + param.sort : ''})}" 
                           aria-label="下一页">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            
            <!-- 静态分页示例（当没有动态数据时显示） -->
            <nav aria-label="Page navigation" th:if="${totalPages == null || totalPages <= 1}">
                <ul class="pagination justify-content-center">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="上一页">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="下一页">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        
        <style>
            .booklist-card {
                transition: transform 0.3s ease;
            }
            .booklist-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            }
            .booklist-description {
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .booklist-covers {
                width: 100%;
                overflow-x: auto;
                padding: 10px 0;
            }
            .cover-scroll {
                display: flex;
                gap: 10px;
            }
            .cover-item {
                flex: 0 0 auto;
            }
            .booklist-cover-img {
                width: 80px;
                height: 120px;
                object-fit: cover;
                border-radius: 4px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                transition: transform 0.2s ease;
            }
            .booklist-cover-img:hover {
                transform: scale(1.05);
            }
            
            /* 隐藏滚动条，但保留功能 */
            .booklist-covers::-webkit-scrollbar {
                height: 0;
            }
        </style>
    </section>
</body>
</html> 